<template>
	<div class="cart-bot-bar flex">
		<div @click="SelectAll">
      <check-button :is-cb="isSelectAll"/>
      <b><span style="position:absolute;top: 12px;left: 40px">全选</span></b>
    </div>
		<div>合计：{{totalPrice}}</div>
		<div class="last" @click="ToPay">去结算{{checkLength}}</div>
	</div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import CheckButton from "@/components/common/CheckButton/CheckButton";
  import {Up_Data} from "@/store/Mutations-Types";

  export default {
		name: 'CartBotBar',
    components:{
      CheckButton
    },
		computed: {
		  ...mapGetters(['CartList','CartLength','totP']),
			totalPrice() {
				return '￥' + this.$store.state.cartList.filter(item => {
					return item.checked
				}).reduce((preValue, item) => {
					return preValue + item.price * item.count
				},0).toFixed(2)
			},
			checkLength() {
				return '(' + this.$store.state.cartList.filter(item => item.checked).length + ')';
			},
			isSelectAll(){
        if(!this.CartLength) return false
        return !(this.CartList.filter(item => !item.checked).length)
      }
		},
    methods:{
      SelectAll(){
        if(this.isSelectAll){
          this.CartList.forEach(item => item.checked = false)
        }else {
          this.CartList.forEach(item => item.checked = true)
        }
      },
      ToPay(){
        if(!this.$store.state.cartList.filter(item => item.checked).length){
          this.$toast.show('请选择商品')
        }else{
          this.$store.commit(Up_Data,this.totalPrice)
          this.$router.replace('/classify')
        }
      }
		}
	}
</script>

<style lang="less" scoped="scoped">
	.cart-bot-bar {
		position: fixed;
		bottom: 49px;
		left:0;
		right: 0;
		height: 40px;
		padding: 0 10px;
		font-size: 13px;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		border-bottom: 1px solid #ececec;
		border-top: 1px solid #ececec;
	}
  .last{
    height: 40px;
    width: 80px;
    margin-right: -10px;
    background: red;
    text-align: center;
    line-height: 40px;
    color: white;
  }
</style>
